<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="js/jquery-3.1.1.min.js">
<link rel="stylesheet" href="layui/css/layui.css"/>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<style type="text/css">
	.layui-table-cell {
	height: auto;
}
</style>

<link >
</head>

<body>
	<div id="div_recommends" style="display:none;">
		<form id="fm_recommends" lay-filter="chaKan" class="layui-form" >
			<div class="layui-form-item">
				<div id="ids">
					<label class="layui-form-label">ID:</label>
					<div class="layui-input-inline">
						<input type="text" name="id" lay-verify="title"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div id="names">
					<label class="layui-form-label">商品名称:</label>
					<div class="layui-input-inline">
						<input type="text" name="name" lay-verify="title"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">推荐类别:</label>
					<div class="layui-input-inline">
						<input type="tel" name="position" lay-verify="title"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">权重:</label>
					<div class="layui-input-inline">
						<input type="tel" name="weight" lay-verify="title"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline" id="sellPrices">
					<label class="layui-form-label">商品价格:</label>
					<div class="layui-input-inline">
						<input type="tel" name="discountPrice" lay-verify="title"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div  class="layui-input-inline" style="content: ">
					<button type="submit" class="layui-btn" style="auto" id="updateRecommends" lay-submit="" lay-filter="updateRecommends">修改</button>
				</div>
			</div>
		</form>
	</div>
	<div>
		<form class="layui-form" action="" onsubmit="return false">
			<div class="layui-form-item">
				<label class="layui-form-label">请输商品名:</label>
				<div class="layui-input-inline" style="width: 200px;">
						<input type="text" name="name" id="name"
							autocomplete="off" class="layui-input">
				</div>
				    <label class="layui-form-label">推荐类别</label>
			    <div class="layui-input-inline">
			      <select name="position" id="position" lay-filter="aihao">
			      	<option value="" selected="selected"></option>
			        <option value="推荐A">推荐A</option>
			        <option value="推荐B">推荐B</option>
			      </select>
			    </div>
				<div class="layui-inline">
					<label class="layui-form-label">价格范围</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="beginPrice" id="beginPrice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="endPrice" id="endPrice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="demo1">搜索</button>
					
				</div>
			</div>
		</form>
	</div> 

	<table id="demo" lay-filter="test"></table>
 	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

<script>
var $=null;
	layui.use(['table','form','layer','laydate'], function(){
	var table = layui.table;
	  var form = layui.form;
	  var layer = layui.layer;
	  var laydate = layui.laydate;
$= layui.$;
  	
  //第一个实例
  table.render({
    elem: '#demo'
    ,even:true
    ,id:'recommends'
    ,url: '../getRecommend' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID'}
      ,{field: 'position', title: '推荐类别'}
      ,{field: 'weight', title: '权重', sort: true,edit:'text',
    	  templet:function(d){
			return '<input type="text" id="weight" required lay-verify="required"   value="'+d.weight+'" autocomplete="off" class="layui-input">'
	  }}
      ,{field: 'name', title: '商品名称',templet:function(obj){return obj.product.name}}
      ,{field: 'sellPrice', title: '商品价格', sort: true,templet:function(obj){return obj.product.sellPrice}}
      //,{field: 'img', title: '商品图片',templet:function(obj){return obj.product.img}}
      ,{field: 'img', title: '商品图片',templet:'<div><img src= "../images/{{d.product.img}}" /></div>'}
      ,{fixed: 'right', title: '操作', width:250, align:'center', toolbar: '#barDemo'}
    ]]
  });
 /*  table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var value = obj.value //得到修改后的值
	    ,data = obj.data //得到所在行所有键值
	    ,field = obj.field; //得到字段
	  	console.log(obj);
	    $.ajax({
	    	url:"http://localhost:8080/watch/updateRecommends",
	    	data:{id:data.id, weight:value,position:value},
	    	
            type:"post",
            dataType:"json",
            success: function (result) { 
               
                //location.reload();
            }
	    })
	  
	 
	}); */
  
  form.on('submit(demo1)', function(data){
	  table.reload("recommends",{
		  where: { //设定异步数据接口的额外参数，任意设
			  name:$("#name").val(),
			  position:$("#position").val(),
			  beginPrice:$("#beginPrice").val(),
			  endPrice:$("#endPrice").val()
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
	});
	  return false
  });
  form.on("submit(updateRecommends)",function(){
		console.log($("#fm_recommends").serialize())
		layer.confirm('确定修改吗?',function(index){
		$.post("../updateRecommends",$("#fm_recommends").serialize(),function(res){
			$("#fm_recommends")[0].reset();
			layer.msg(res.msg)
			if(res.code=="0"){
				layer.closeAll();
				table.reload("recommends");
			} 
		},"json")
		});
		return false;
	})
//监听工具条 
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    
   console.log(obj);
    if(layEvent === 'detail'){ //查看
    	console.log(data);
    	$("#fm_recommends")[0].reset();
    	$("#updateRecommends").hide();
    	form.val("chaKan",data)
    	form.val("chaKan",{
    		"name":data.product.name,
    		"sellPrice":data.product.sellPrice
    		
    	})
    	
    	layer.open({
			type:1,
			content:$("#div_recommends"),
			area:["400px","400px"]
			})
    } else if(layEvent === 'del'){ //删除
      layer.confirm('确定删除吗',function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
        console.log(obj)
        $.post("../delRecommends",{
        	id:obj.data.id
        },function(res){
        	layer.msg(res)
        	if (res.code=="0") {
				layer.msg("删除成功!")
			} else {
				layer.msg("删除失败!")
			}
        },"json")
      });
    } else if(layEvent === 'edit'){ //编辑
    	$("#fm_recommends")[0].reset();
    	$("#updateRecommends").show();
    	$("#names").hide();
    	$("#ids").hide();
    	$("#sellPrices").hide();
    	$("#imgs").hide();
    	form.val("chaKan",data)
    	form.val("chaKan",{
    		"name":data.product.name,
    		"sellPrice":data.product.sellPrice,
    		"img":data.product.img	
    	})
    	layer.open({
			type:1,
			content:$("#div_recommends"),
			area:["400px","400px"]
			})
    } 
  });
  	table.on('edit(test)', function(obj){
	    var value = obj.value //得到修改后的值
	    var data = obj.data //得到所在行所有键值
	    console.log(data);
	    $.post("../updateRecommends",{
	  		id : data.id,
	  		weight:data.weight
	  	},function(res){
	  		layer.msg(res.msg);
	  	},"json")
	  });
  
});
	function editWeight(id){
	  	var weight=$("#weight").val()
	  	console.log(id)
	  	console.log(weight)
	  	
	  }
</script>
</body>
</html>